<template>
	<view class="page">
		<view class="page-header-container">
			<view class="search-warpper">
				<u-search placeholder="患者姓名" v-model="keyword" @search='getTableData(1)'
					@custom='getTableData(1)'></u-search>
			</view>
			<view class="tabs-warpper">
				<u-tabs :list="tabsList" :scrollable="false" keyName='name' @change='tabsChange'></u-tabs>
			</view>
		</view>
		<view class="consultation-list-container">
			<view class="consultation-item" v-for="(item,index) in tableData">
				<view class="item-header">
					<view class="patient-info">
						<text class="patient-name">{{item.memberName}}</text>
						<text class="patient-gender">{{item.gender===1?'男':'女'}}</text>
						<text class="patient-phone-no">{{item.memberAge}}</text>
					</view>
					<view class="status">{{item.conStatus===6?'待会诊':item.conStatus===7?'报告中':'已完成'}}</view>
				</view>
				<view class="disease-desc">病情描述: {{item.mainsuit}}</view>
				<view class="item-footer">
					<text class="consultation-time">会诊时间: {{item.conTime}}</text>
					<view class="detail-link" @click="toDetail(item.id)">
						<text class="text">查看详情</text>
						<u-icon color="#3c9cff" name="arrow-right-double" size="18px"></u-icon>
					</view>
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>


		</view>
	</view>
</template>

<script>
	import {
		consultationlist
	} from '@/common/api/consultation/list/list.js'
	export default {
		data() {
			return {
				EQConStatus:0,
				toastShow: false,
				keyword: '',
				tableData: [],
				newtableData: [],
				tabsList: [{
						id: 0,
						name: '全部'
					},
					{
						id: 6,
						name: '待会诊'
					},
					{
						id: 7,
						name: '报告中'
					},
					{
						id: 9,
						name: '已完成'
					},
				],
				pageInfo: {
					total: 0,
					offset: 0,
					limit: 10,
				},
			}
		},
		onShow() {
			this.pageInfo.offset=0
			this.getTableData(1)
		},
		// 触底的事件
		onReachBottom() {
			if (this.pageInfo.offset / 10 + 1 >= this.pageInfo.total) {
				return this.$refs.uToast.show({
					type: "default",
					message: "已加载全部数据",
				})
			}


			// 让页码值自增+1
			this.pageInfo.offset += 10
			this.getTableData(2)
		},
		methods: {
			// 去往详情页
			toDetail(id){
				uni.navigateTo({
					url: '/pages/consultation/detail/detail?id='+id
				});
			},
			// 切换标签事件
			tabsChange(e) {
				this.EQConStatus=e.id
				this.pageInfo.offset=0
				this.pageInfo.limit=10
				this.getTableData(1)
			},
			// 获取列表数据
			getTableData(val) {
				let data = {
					order: "desc",
					sort: "id",
					offset: this.pageInfo.offset,
					limit: this.pageInfo.limit,
					transferFilterMap: {
						EQ_isAppoint: 0,
						LIKE_memberName: this.keyword ? '%' + this.keyword + '%' : null, //患者
						EQ_applyDoctorId:uni.getStorageSync('doctorId')
					},
				};
				 if (this.EQConStatus!==0) {
				        data.transferFilterMap.EQ_conStatus=this.EQConStatus
				      }
				consultationlist(data).then(response => {
					if (response.code == 1) {

						if(val==1){
							this.tableData=response.object.content
						}else{
							this.tableData.push(...response.object.content)
						}
						this.pageInfo.total = response.object.totalPages;

					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-header-container {
		background: #fff;

		.search-warpper {
			padding: 0 32rpx
		}
	}

	.consultation-list-container {
		.consultation-item {
			margin: 15px auto 0;
			padding: 10px;
			width: 686rpx;
			border-radius: 10px;
			background-color: #fff;
			box-sizing: border-box;

			.item-header {
				margin-bottom: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.patient-info {
					font-size: 0;

					.patient-name {
						color: $text-main-color;
						font-size: $ft-size-md;
						font-weight: bold;
					}

					.patient-gender {
						margin-left: 5px;
						color: $text-content-color;
						font-size: $ft-size-base;
					}

					.patient-age {
						margin-left: 5px;
						color: $text-content-color;
						font-size: $ft-size-base;
					}

					.patient-phone-no {
						margin-left: 5px;
						color: $text-content-color;
						font-size: $ft-size-base;
					}
				}

				.status {
					color: $text-desc-color;
					font-size: $ft-size-base;
				}
			}

			.disease-desc {
				color: $text-main-color;
				font-size: $ft-size-base;
				padding: 10px;
				border-radius: 10px;
				background-color: $primary-light;
			}

			.item-footer {
				margin-top: 10px;
				display: flex;
				justify-content: space-between;

				.consultation-time {
					color: $text-content-color;
					font-size: $ft-size-sm;
				}

				.detail-link {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.text {
						color: $primary;
						font-size: $ft-size-base;
					}
				}
			}
		}
	}
</style>